<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>layui后台管理模板</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="/webjars/layui/2.3.0/css/layui.css" media="all"/>
    <script type="text/javascript" src="/webjars/layui/2.3.0/layui.js"></script>
    <script type="text/javascript" src="/asset/js/lp.js"></script>
    <script type="text/javascript" src="/asset/js/jquery-3.2.1.min.js"></script>
    <script src="/webjars/vue/2.5.3-1/vue.min.js"></script>
    <!-- 引入样式 -->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="/webjars/element-ui/2.4.6/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script src="/webjars/element-ui/2.4.6/lib/index.js"></script>
</head>
<body class="childrenBody">
<div id="app">
    <form class="layui-form" style="width:70%;margin-left: 10%" action="/governor/user/addUser" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">接口名称</label>
            <div class="layui-input-block">
                <div style="float: left;width:50%;">
                    <el-input v-model="portName" placeholder="请输入内容"></el-input>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">接口URL</label>
            <div class="layui-input-block">
                <div style="float: left;width:50%;">
                    <el-input v-model="portUrl" placeholder="请输入内容"></el-input>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">jar文件</label>
            <template>
                <el-select v-model="jarName" size="medium" placeholder="请选择">
                    <el-option
                            v-for="item in jarList"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </template>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Class</label>
            <template>
                <el-select v-model="className" size="medium" placeholder="请选择">
                    <el-option
                            v-for="item in classList"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </template>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Method</label>
            <template>
                <el-select v-model="methodName" size="medium" placeholder="请选择">
                    <el-option
                            v-for="item in methodList"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </template>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <el-row>
                    <el-button v-on:click="post">立即提交</el-button>
                    <el-button type="reset" class="layui-btn layui-btn-primary">重置</el-button>
                </el-row>
            </div>
        </div>
    </form>
</div>
<script>
    var App = new Vue({
        el: '#app',
        data: {
            jarList: '',
            jarName: '',
            className: '',
            classList: '',
            methodName: '',
            methodList: '',
            portName: '',
            portUrl: '',
            parameterCount: ''
        },
        beforeCreate: function () {
            var url = "/port/jars";
            var _self = this;
            $.get(url, function (data) {
                _self.jarList = data;
                _self.classList = _self.jarList[0].classList;
                _self.methodList = _self.classList[0].methodList;
            })
        },
        methods: {
            post: function () {
                var url = "/port";
                var _self = this;
                $.ajax({
                    url:url,
                    type:"POST",
                    data:{
                        jarName: _self.jarName,
                        className: _self.className,
                        methodName:_self.methodName,
                        portName: _self.portName,
                        portUrl: _self.portUrl,
                        parameterCount: _self.parameterCount
                    },
                    success:function(result){
                        console.log(result);
                        //关闭对话框
                        alert("success")
                        //回到本页面
                    },
                    error:function () {
                        alert("新增失败")
                    }
                })
            }
        },
        // beforeMount: function () {
        //     this.updateClass();
        // },
        watch: {
            jarName: function (val) {
                for (var i in this.jarList) {
                    var obj = this.jarList[i];
                    if (obj.name == val) {
                        this.classList = obj.classList;
                        break;
                    }
                }
                this.className = this.classList[0].name;
            },
            className: function (val) {
                for (var i in this.classList) {
                    var obj = this.classList[i];
                    if (obj.name == val) {
                        this.methodList = obj.methodList;
                        break;
                    }
                }
                this.methodName = this.methodList[0].name;
            },
            methodName: function (val) {
                for (var i in this.methodList) {
                    var obj = this.methodList[i];
                    if (obj.name == val) {
                        this.parameterCount = obj.parameterCount;
                        break;
                    }
                }
            }
        }
    });
</script>
</body>
</html>